<template>
  <view class="orderGoods">
<!--    <view class="design-item-pic" @click="goDesignCon(props.designInfo)">-->
<!--      <image class="deign-pic" :src="props.designInfo.avatar.designerAvatar" />-->
<!--      <div class="desgin-name">{{ props.designInfo.nickName }}</div>-->
<!--      <image class="right-icon" src="https://cos.aitshirt.cn/app-icon/rightarr.png"></image>-->
<!--    </view>-->
    <view class="goodWrapper">
      <view v-for="cart in cartInfo" :key="cart.id" class="item acea-row row-between-wrapper" style="border: none;">
        <view class="pictrue">
          <image :src="cart.productInfo.image" class="image" mode="aspectFit" />
        </view>
        <view class="text">
          <view class="acea-row row-between-wrapper">
            <view class="name line1">{{ cart.productInfo.storeName }} * {{ cart.cartNum }}</view>
            <view class="num"></view>
          </view>
          <view v-if="cart.productInfo.attrInfo" class="attr line1"> 已选：{{ cart.productInfo.attrInfo.sku }}</view>
          <view v-if="isIntegral" class="money font-color-red">{{ cart.costPrice }}积分</view>
<!--          font-size: 30rpx;  | <text>单价￥{{ cart.truePrice }}-->
          <view v-else class="money font-color-red" ><text style="font-weight: bold; ">总金额：{{order.payPrice}}</text></view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { _router } from '@/utils/oldIndex';

export default {
  name: 'OrderGoods',
  props: {
    evaluate: Number,
    order: {
      type: Object,
      default: () => {},
    },
    cartInfo: {
      type: Array,
      default: () => [],
    },
    isIntegral: Boolean,
  },
  data: function () {
    return {};
  },
  mounted: function () {},
  methods: {
    goDesignCon(designItem) {
      _router.push({
        path: '/pages/designer/main',
        query: {
          id: designItem.uid,
        },
      });
    },
    routerGo(cart) {
      _router.push({
        path: '/pages/shop/GoodsEvaluate/index',
        query: { id: cart.unique },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '../style/style.less';
.goodWrapper {
  .name {
    font-weight: bold !important;
    font-size: 28rpx !important;
    color: #222222 !important;
    line-height: 40rpx !important;
  }
  .money {
    font-weight: bold !important;
    font-size: 24rpx !important;
    color: #f25a27 !important;
    line-height: 28rpx !important;
  }
}

.goodWrapper .item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 30rpx;
  margin-left: 0.3 * 100rpx;
  padding-right: 0.3 * 100rpx;
  border-bottom: 0.02 * 100rpx solid #f0f0f0;
  height: 1.8 * 100rpx;
}

.goodWrapper .item .pictrue {
  width: 1.3 * 100rpx;
  height: 1.3 * 100rpx;
}

.goodWrapper .item .pictrue .image {
  width: 100%;
  height: 100%;
  border-radius: 0.06 * 100rpx;
}

.goodWrapper .item .text {
  width: 5.37 * 100rpx;
  position: relative;
}

.goodWrapper .item .text .name {
  font-size: 0.28 * 100rpx;
  color: #282828;
  width: 4.53 * 100rpx;
}

.goodWrapper .item .text .num {
  font-size: 0.26 * 100rpx;
  color: #868686;
}

.goodWrapper .item .text .attr {
  font-size: 0.2 * 100rpx;
  color: #868686;
  margin-top: 0.07 * 100rpx;
}

.goodWrapper .item .text .money {
  font-size: 0.26 * 100rpx;
  margin-top: 0.17 * 100rpx;
}

.goodWrapper .item .text .evaluate {
  position: absolute;
  width: 1.14 * 100rpx;
  height: 0.46 * 100rpx;
  border: 1px solid #e93323;
  color: #e93323;
  border-radius: 0.04 * 100rpx;
  text-align: center;
  line-height: 0.46 * 100rpx;
  right: 0;
  bottom: -0.1 * 100rpx;
}

.goodWrapper .item .text .evaluate.userEvaluated {
  font-size: 0.26 * 100rpx;
  color: #aaa;
  background-color: #f7f7f7;
  border-color: #f7f7f7;
}

.design-item-pic {
  display: flex;
  align-items: center;
  gap: 16rpx;
  .deign-pic {
    width: 40rpx;
    height: 40rpx;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
  }
  .desgin-name {
    font-weight: bold;
    font-size: 24rpx;
    color: #222222;
    line-height: 34rpx;
  }
  .right-icon {
    width: 12rpx;
    height: 20rpx;
  }
}
</style>
